<script setup>

import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {diffTagText, diffTagType, DiffType, PoolUpdateDTO} from "@/model/pool.js";
import {r_p_getByPoolId} from "@/request/api/pool.js";

const router = useRouter();
const route = useRoute();

const poolUpdateDTO = ref({...PoolUpdateDTO});
const titleBt = ref(true);
const diffBt = ref(true);
const descBt = ref(true);
const caRsBt = ref(true);

const btText = (v) => v === true ? '更 改' : '锁 定';

const getByPoolId = () => {
  const poolId = route.params.poolId;
  poolUpdateDTO.value.poolId = poolId;
  r_p_getByPoolId(poolId).then(data => {
    poolUpdateDTO.value.title = data.title;
    poolUpdateDTO.value.difficulty = data.difficulty;
    poolUpdateDTO.value.description = data.description;
  });
}

const update = () => {
// TODO
}

onMounted(() => {
  getByPoolId();
});

</script>

<template>

  <div class="index-all">
    <el-form :model="poolUpdateDTO" label-width="70px">
      <el-form-item label="题 号">
        <el-text type="success">{{ poolUpdateDTO.poolId }}</el-text>
      </el-form-item>
      <el-form-item label="标 题">
        <el-input class="small" v-model="poolUpdateDTO.title" maxlength="20" show-word-limit
                  :disabled="titleBt"/>
        <el-button class="bt" @click="titleBt = !titleBt">{{ btText(titleBt) }}</el-button>
      </el-form-item>
      <el-form-item label="难 度">
        <el-radio-group class="small" v-model="poolUpdateDTO.difficulty" :disabled="diffBt">
          <el-radio v-for="(type, index) in DiffType" :key="index" :value="type">
            <el-tag :type="diffTagType(type)">{{ diffTagText(type) }}</el-tag>
          </el-radio>
        </el-radio-group>
        <el-button class="bt" @click="diffBt = !diffBt">{{ btText(diffBt) }}</el-button>
      </el-form-item>
      <el-form-item label="描 述">
        <el-input type="textarea" class="big" v-model="poolUpdateDTO.description" :rows="5"
                  resize="none" :readonly="descBt"/>
        <el-button class="bt" @click="descBt = !descBt">{{ btText(descBt) }}</el-button>
      </el-form-item>
      <el-form-item label="输入集">
        <el-input type="textarea" class="big" v-model="poolUpdateDTO.cases" :rows="5"
                  resize="none" :readonly="caRsBt"/>
        <el-button class="bt" @click="caRsBt = !caRsBt">{{ btText(caRsBt) }}</el-button>
      </el-form-item>
      <el-form-item label="输出集">
        <el-input type="textarea" class="big" v-model="poolUpdateDTO.results" :rows="5"
                  resize="none" :readonly="caRsBt"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="router.back()">取 消</el-button>
        <el-button type="success" @click="update">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.small {
  width: 400px;
}

.big {
  width: 800px;
}

.el-button {
  width: 100px;
}

.bt {
  margin-left: 10px;
}
</style>